<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--订单晒单-->
    <view class="mx-4">
      <view class="bg-white py-2.5 rounded-md bg-box-shadow mt-5">
        <view class="mx-4">
          <view class="text-sm">活动商品</view>
        </view>
        <view class="mx-4">
          <view class="flex pt-3">
            <view class=""
              ><u--image
                :src="info.productImg"
                width="160rpx"
                height="160rpx"
                radius="6"
              ></u--image
            ></view>
            <view class="ml-3">
              <view class="u-line-1 text-sm leading-5"
                ><text>店铺：</text>{{ info.storeName }}</view
              >
              <view class="text-xs leading-5"><text>规格：</text>任意规格</view>
              <view class="text-xs leading-5"><text>件数：</text>1</view>
              <view class="leading-6"
                ><text class="text-sm">总价：</text
                ><text class="text-primary">{{ info.orderPrice }}</text></view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="bg-white py-2.5 rounded-md bg-box-shadow mt-5">
        <view class="mx-4">
          <view class="text-sm leading-10 mb-4">上传晒单图片</view>
          <view
            class="flex justify-center mb-5"
            @click="uploadPhoto('shareImg')"
            v-if="shareOrderImgUrl == ''"
          >
            <image class="w-32 h-32" src="/static/icons/icon-photo-add.png" />
          </view>
          <view
            class="flex justify-center mb-5 relative"
            v-else
            @click="uploadPhoto('shareImg')"
          >
            <view
              class="text-center text-white text-sm w-32 h-10 leading-10 button-bg absolute bottom-0 z-10 rounded-b-xl"
              >更换</view
            >
            <image class="w-32 h-32 rounded-xl" :src="shareOrderImgUrl" />
          </view>
        </view>
      </view>
    </view>
    <view class="fixed bottom-6 left-10 right-10">
      <view
        class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-primary bg-box-shadow"
        @click="confirmShare(id)"
        >立即晒单</view
      >
    </view>
  </view>
</template>

<script>
import { continueOpt, continueOptShare } from '../../services/mine';
import { postFile } from '../../../services/file';

export default {
  data() {
    return {
      id: '',
      info: {},
      shareOrderImg: '',
      shareOrderImgUrl: '',
    };
  },
  async created() {
    const { id } = this.$Route.query;
    this.id = id;
    this.continueTo(id);
  },
  methods: {
    //订单列表-待操作-继续(晒单)
    async confirmShare(id) {
      if (this.shareOrderImg == '') {
        uni.showToast({
          title: '请先上传晒单图片',
          icon: 'none',
        });
        return;
      }
      const { code, data } = await continueOptShare({
        id,
        shareOrderImg: this.shareOrderImg,
      });
      if (code != 200) return;
      uni.$u.toast('晒单提交成功');
      setTimeout(() => {
        this.$Router.push({
          name: 'order',
          params: {
            searchType: 3,
          },
        });
      }, 800);
    },
    //订单继续 - 获取订单确认信息
    async continueTo(id) {
      const { code, data } = await continueOpt({ id });
      if (code != 200) return;
      this.info = data;
    },
    //上传晒单图片
    uploadPhoto(type) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          const { code, data } = await postFile(file, 'order');
          if (code != 200) return;
          switch (type) {
            case 'shareImg':
              this.shareOrderImgUrl = data.httpUrl;
              this.shareOrderImg = data.path;
              break;
          }
        },
      });
    },
  },
};
</script>

<style>
page {
  background: #f2f2f2;
}
</style>
